<template>
  <div class="datasource-manage">
<!--    <Alert v-permission="'reverse'" show-icon>
      由于演示系统服务器资源有限，故不支持用户自己添加数据库，请在QQ交流群（群号：1072768942）或直接联系管理员（QQ：229041307）进行添加
    </Alert>-->
    <Button class="m-r-5px" type="primary" @click="openDatabaseForm('add')"><Icon type="md-add"/> 添加数据库</Button>
    <Tooltip placement="top" content="刷新数据">
      <Button class="m-r-5px" type="primary" @click="loadDatabases">
        <Icon type="md-refresh"/>
      </Button>
    </Tooltip>
    <div class="m-b-10px"></div>
    <Table :columns="columns" :data="tableData" :loading="loading"></Table>
    <Page size="small" class="m-t-5px float-right" :total="pageTotal" :current.sync="pageIndex" :page-size="pageSize"
          show-elevator show-total @on-change="loadDatabases">
    </Page>

    <DatabaseForm ref="databaseForm" @refreshDataList="loadDatabases"></DatabaseForm>
  </div>
</template>

<script>

import DatabaseForm from './DatabaseForm'

import ManageMixin from '../../../../mixin/ManageMixin'

export default {
  name: 'DatabaseManage',
  mixins: [ManageMixin],
  components: {
    DatabaseForm
  },
  data() {
    return {
      databaseFormDrawerVisible: false,
      loading: false,
      columns: [
        {
          title: '备注名称',
          key: 'alias_name',
          width: 150
        },
        {
          title: '引用名称',
          key: 'pool_name',
          width: 130
        },
        {
          title: '驱动类',
          key: 'driver_class_name',
          width: 200
        },
        {
          title: 'URL',
          key: 'url'
        },
        {
          title: '用户名',
          key: 'username',
          width: 120
        },
        {
          title: '创建时间',
          key: 'create_date',
          width: 170
        },
        {
          title: '操作',
          key: 'action',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Poptip', {
                props: {
                  confirm: true,
                  transfer: true,
                  placement: 'top-end',
                  title: '您确定要删除此项吗？'
                },
                style: {},
                on: {
                  'on-ok': () => {
                    this.removeDatabase(params.row.pool_name)
                  }
                }
              }, [
                h('Button', {
                  props: {
                    size: 'small',
                    type: 'error',
                    icon: 'md-trash'
                  }
                },)
              ])
            ]);
          }
        }
      ],
      data: []
    }
  },
  mounted() {
    this.loadDatabases();
  },
  methods: {

    loadDatabases() {
      this.loading = true
      this.$PnApi.DatabaseApi.getDatabaseByPage(this.pageIndex, this.pageSize).then(result => {
        this.tableData = result.data.payload.list;
        this.pageTotal = result.data.payload.total;
        this.loading = false;
      })
    },

    openDatabaseForm(type, id) {
      this.$refs.databaseForm.init(type, id)
    },

    removeDatabase(pool_name) {
      this.$PnApi.DatabaseApi.removeDatabase(pool_name).then(result => {
        if (result.data.success) {
          this.loadDatabases();
          this.$Message.success(result.data.message)
        }
      })
    }

  },
  computed: {}
}
</script>

<style scoped>

</style>
